<template>
    <div class="index">
      <div class="slideShow" style="margin-top: 60px">
        <el-carousel :interval="5000" arrow="never" autoplay height="360px">
          <el-carousel-item v-for="item in picList" :key="item.url">
           <div class="Img" :style="`background-image: url(${$downloadUrl+item.url})`" style="height: 360px;background-repeat: no-repeat;background-position: 50%;background-size: cover"></div>
<!--            <img :src="$downloadUrl+item.url" alt="" style="width: 100%;height: 360px" >-->
          </el-carousel-item>
        </el-carousel>
      </div>
        <div class="middle">

            <div class="slide">

              <div class="right">
                <el-card class="box-card">
                  <div slot="header" class="clearFix">
                    <!--                            <div class="img"><img :src="userInfo.url==null?$pic:$downloadUrl + userInfo.url"/></div>-->
                    <div class="name">
                      {{userInfo.name}},祝你开心每一天
                      <!--                                {{userInfo.sex==0?'先生':'女士'}}-->
                    </div>
                    <div class="message">来天亮教育的
                      <span style="color: rgba(67, 146, 253, 1);font-size: 22px;padding-left: 6px">
                                    {{isNaN($moment(Date()).add(1, 'day').diff($moment(userInfo.intoTime), 'days'))?
                          $moment(Date()).add(1, 'day').diff($moment(userInfo.createTime), 'days')
                          :$moment(Date()).add(1, 'day').diff($moment(userInfo.intoTime), 'days')}}
                                </span>天
                    </div>
                    <div class="percent">
                      <div class="msg">学习进度<span>{{speed}}</span></div>
                      <el-progress :percentage="speedNum" :show-text="false" :stroke-width="10"></el-progress>
                    </div>
                  </div>
                  <!--                        <div class="text item">-->
                  <!--                            <div class="box">-->
                  <!--                                {{this.$store.state.dict.dictTree.ea_welcome['remark'][Math.floor((Math.random()*this.$store.state.dict.dictTree.ea_welcome['remark'].length))]}}-->
                  <!--                            </div>-->
                  <!--                        </div>-->
                </el-card>
              </div>
            </div>
            <div class="dynamics" style="padding-top: 15px">
                <companyDynamics :dynamics-list="DynamicsList"></companyDynamics>
            </div>
            <div class="publici">
                <elegantDemeanor :picList="elegantList"></elegantDemeanor>
            </div>
          <div class="publicity">
            <StudentDemeanor :picList="elegantList"></StudentDemeanor>
          </div>

        </div>
<!--      底部-->
<!--      <IndexFooter></IndexFooter>-->
        <indexBottom></indexBottom>
        <el-dialog
                :visible.sync="loopShow"
                width="800px"
                >
          <p style="margin: 10px 0px;font-size: 20px">{{carouselTitle}}</p>
            <div class="content" v-html="detailData"></div>
            <!--          <div class="create">-->
            <!--            <p style="color: #999093;margin: 15px 0px">创建时间：{{carouselTime}}</p>-->
            <!--            <p style="color: #999093;margin: 15px 0px">创建人：{{carouselUserBy}}</p>-->
            <!--          </div>-->
        </el-dialog>
    </div>
</template>

<script>
// import IndexFooter from "@/components/IndexFooter";
import StudentDemeanor from "@/views/index/components/StudentDemeanor";
    import indexBottom from '../../components/indexBottom'
    import companyDynamics from '../../components/companyDynamics'
    import elegantDemeanor from './components/elegantDemeanor'
    import { faceShowList, getDynamicsList } from '../../api/welcome'
    import { getStuSpeed } from '../../api/login'
    import { mapState } from 'vuex'
  export default {
    name: 'index',
    components:{
      indexBottom,
      companyDynamics,
      elegantDemeanor,
      StudentDemeanor
      // IndexFooter,
    },
    created () {
      this.getDynamicsList()
      this.getFaceList()
      this.getSpeed()
        console.log("111",this.$moment(Date()).add(1, 'day'))
        console.log(this.$moment(this.userInfo.intoTime))
        console.log(this.userInfo)
    },
    computed:{
      ...mapState({
        userInfo:state=>state.user.userInfo
      })
    },
    data(){
      return{
        loopShow:false,
        detailData:'',
        //轮播图的标题
        carouselTitle:'',
        //轮播图的创建时间
        carouselTime:'',
        //轮播图的创建人
        carouselUserBy:'',
        speed:'',
        speedNum:0,
        picList:[],
        elegantList:[],
        DynamicsList:[]
      }
    },
    methods:{
      //获取轮播图 公司动态
      getDynamicsList(){
        getDynamicsList({pageSize:10,pageNum:1,isLoopShow:0}).then(res=>{
          console.log(res)
          if(res.code === 200){
            this.picList = res.rows.map(i=>({
              url:i.loopUrls,
              content:i.content,
              title:i.title,
              createdTime:i.createTime,
              createBy:i.createBy
            }))
            this.picList=this.picList.filter((i)=>{
              if(i.url!==''){
                return i
              }
              })
          }
        })
        getDynamicsList({pageSize:10,pageNum:1,isShow:0}).then(res=>{
          if(res.code === 200){
            this.DynamicsList = res.rows.filter(i=>{
              return i.fileUrls !==''
            })
          }
        })
      },
      //获取学员风采
      getFaceList(){
        faceShowList({}).then(res=>{
          if (res.code === 200){
            this.elegantList = []
            console.log(res)
            res.rows.forEach(i=>{
              if (i.isShow===0){
                this.elegantList.push({src:this.$downloadUrl+i.fileUrls,info:i.content,title:i.title})
              }
            })
          }
        })
      },
      //获取进度
      getSpeed(){
        getStuSpeed({studentId:this.userInfo.id,classId:this.userInfo.classId}).then(res=>{
          this.speed = res.msg
          this.speedNum = Number(res.msg.substr(0,res.msg.length-1))
        })
      },
      //获取轮播图详情
      getDetail(){
        let activeIndex = this.$refs.carousel.activeIndex
        this.detailData = this.picList[activeIndex].content
        this.carouselTitle= this.picList[activeIndex].title
        this.carouselTime=this.picList[activeIndex].createdTime
        this.carouselUserBy=this.picList[activeIndex].createBy
        this.loopShow = true
      }
    }
  }
</script>

<style scoped lang="less">
    .index{
        //margin-top: 80px;
        //background-image: url("../../assets/images/topBg.png") ;
        background-repeat:no-repeat;
        background-position:top;
      slideShow{
        padding-top: 60px;
        Img{
          height: 360px;
        }

      }
        >.middle{
            width: 1200px;
            margin:0 auto 80px;
          .slide{
            position: relative;
            .right{
              position: absolute;
              bottom: 5%;
              right: 12%;
              z-index: 2;
              >.box-card{
                width: 281px;
                border: none;
                border-radius: 20px;
                background-color: #B2D7FC;
                ::v-deep .el-card__body{
                  padding: 10px;
                  display: none;
                }
                ::v-deep .el-card__header{
                  padding: 15px 20px;
                }
                .clearFix{
                  padding: 0 25px;
                  .img{
                    width: 62px;
                    height: 62px;
                    margin: 29px auto;
                    border-radius: 50%;
                    img{
                      width: 100%;
                      height: 100%;
                      border-radius: 50%;
                    }
                  }
                  .name{
                    //padding-bottom: 20px;
                    color: #ffffff;
                  }
                  .message{
                    text-align: center;
                    font-size: 16px;
                    font-family: Microsoft YaHei;
                    font-weight: 400;
                    color: #ffffff;
                  }
                  .percent{
                    //width: 170px;
                    margin-top: 10px;
                    .msg{
                      font-size: 16px;
                      font-family: Microsoft YaHei;
                      font-weight: 400;
                      color: #ffffff;
                      padding-bottom: 10px;
                      span {
                        font-size: 22px;
                        color: rgba(67, 146, 253, 1);
                      }
                    }
                  }
                }
                .text{
                  font-size: 14px;
                  font-family: Microsoft YaHei;
                  font-weight: 400;
                  color: #999999;
                  .box{
                    width: 195px;
                    height: 90px;
                    background: #EBF6FD;
                    font-size: 14px;
                    font-family: Microsoft YaHei;
                    font-weight: 400;
                    color: #39A5EF;
                    display: table-cell;
                    vertical-align:middle;
                    text-align: center;
                  }
                }
              }
            }
          }
        //    .slideShow{
        //        //width: 80%;
        //        //height: 400px;
        //        //display: flex;
        //        //padding-top: 20px;
        //        ////.left{
        //        //    width: 960px;
        //        //    flex-shrink: 0;
        //        //    margin-right: 18px;
        //        //}
        //
        //    }
        }
        ::v-deep.el-dialog{
            /*height: auto !important;*/
            max-height: 1000px;
            overflow: hidden;
            overflow: scroll;
            overflow: auto;
            background-size: contain!important;
            background-color: white;
            .el-dialog__body{
                img {
                    max-width: 100% !important;
                }
                .content{
                    min-height: 350px;
                    img{
                        width: 100%;
                        height: 100%;
                    }
                }
            }
        }
    }
    /*这是更改富文本的设定*/
    .changeWidth {
        width: 100% !important;
        opacity: 50% !important;
    }
    .create{
      display: flex;
      justify-content: space-around;
      p{
        font-size: 15px;
      }
    }
    .content{
      padding-top: 20px;
      p{
        margin: 15px;
      }
    }
.publicity{
  margin-top: 50px;
}
</style>
